import React, { useEffect, useRef, useState } from 'react'
import { Button, Input, Select, Steps, message, notification } from 'antd'
import { PageHeader } from '@ant-design/pro-layout'//需要安装@ant-design/pro-components，可以参考antd官网
import style from './News.module.css'
import { Form } from 'antd'
import axios from 'axios'
import NewsEditor from './NewsEditor'

const { Option } = Select;

function NewUpdate(props) {
  const [current, setcurrent] = useState(0)
  const [categoryList, setcategoryList] = useState([])
  const [formInfo, setformInfo] = useState({})
  const [content, setContent] = useState("")

  const NewsForm = useRef(null)


  const handleNext = () => {
    if (current === 0) {
      NewsForm.current.validateFields().then((res) => {
        setformInfo(res)
        setcurrent(current + 1)
      }).catch((err) => {
        console.log(err);
      })
    } else {
      if (content === "" || content === "<p></p>") {
        message.error("新闻内容不能为空")
      } else {
        setcurrent(current + 1)
      }
    }
  }
  const handlePrevious = () => {
    setcurrent(current - 1)
  }

  useEffect(() => {
    axios.get("/categories ").then((res) => {
      setcategoryList(res.data)
    })
  }, [])

  useEffect(() => {
    // console.log(props.match.params.id);
    axios.get(`/news/${props.match.params.id}?_expand=category&_expand=role`).then((res) => {
      let {title,categoryId,content} = res.data; 
      NewsForm.current.setFieldsValue({
        title:title,
        categoryId:categoryId
       })

       setContent(content)
    })
}, [props.match.params.id])

  const handleSave = (auditState) => {
    axios.patch(`/news/${props.match.params.id}`, {
      ...formInfo,
      "content": content,
      "auditState": auditState
    }).then((res)=>{
      props.history.push(auditState === 0 ?"/news-manage/draft":"/audit-manage/list");
      notification.info({
        message:"通知",
        description:`您可以跳转到${auditState === 0 ? "草稿箱" : "审核列表"}中查看您的新闻`,
        placement:"bottomRight"
      })
    })
  }
  return (
    
    <div>
      <PageHeader
        title="更新新闻"
        onBack={() => window.history.back()}
      />

      <Steps
        current={current}
        items={[
          {
            title: '基本信息',
            description: "新闻标题、新闻分类",
          },
          {
            title: '新闻内容',
            description: "新闻主体内容",
          },
          {
            title: '新闻提交',
            description: "保存草稿或者提交审核",
          },
        ]}
      />

      <div className={style.formBox}>
        <div className={current === 0 ? '' : style.active}>
          <Form
            name='basic'
            ref={NewsForm}
          >
            <Form.Item
              label="新闻标题"
              name="title"
              rules={[
                {
                  required: true,
                  message: 'Please input your News-title!',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="新闻分类"
              name="categoryId"
              rules={[
                {
                  required: true,
                  message: 'Please Select your News-category!',
                },
              ]}
            >
              <Select>
                {
                  categoryList.map(item => {
                    return <Option
                      value={item.id}
                      key={item.id}
                    >{item.title}</Option>
                  })
                }
              </Select>
            </Form.Item>
          </Form>
        </div>
        <div className={current === 1 ? '' : style.active}>
          <NewsEditor getContent={(value) => {
            setContent(value)
          }} content={content}/>
        </div>
        <div className={current === 2 ? '' : style.active}>

        </div>

      </div>

      <div>
        {
          current < 2 && <Button
            type='primary'
            style={{ margin: "5px 10px" }}
            onClick={handleNext}
          >下一步</Button>
        }
        {
          current > 0 && <Button
            style={{ margin: "5px 10px" }}
            onClick={handlePrevious}
          >上一步</Button>
        }
        {
          current === 2 && <span>
            <Button
              type='primary'
              style={{ margin: "5px 10px" }}
              onClick={() => handleSave(0)}
            >保存草稿</Button>
            <Button
              danger
              style={{ margin: "5px 10px" }}
              onClick={() => handleSave(1)}
            >提交审核</Button>
          </span>
        }
      </div>
    </div>
  )
}

export default NewUpdate